
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="layui/css/layui.css">
    <style type="text/css">
        #background{
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: -1;
        }
        .container{
            width: 420px;
            height: 320px;
            min-height: 320px;
            max-height: 320px;
            position: absolute;
            top: -60px;
            left: 150px;
            bottom: 0;
            right: 0;
            margin: auto;
            padding: 20px;
            z-index: 130;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
            font-size: 16px;
        }
        .close{
            background-color: white;
            border: none;
            font-size: 18px;
            margin-left: 410px;
            margin-top: -10px;
        }

        .layui-input{
            border-radius: 5px;
            width: 300px;
            height: 40px;
            font-size: 15px;
        }
        .layui-form-item{
            margin-left: -20px;
        }
        #logoid{
            margin-top: -10px;
            width:300px;
            text-align: center;
            margin-left: 60px;
            font-size: 18px;
            color: black;
            font-weight: 600;
            padding-bottom: 10px;
        }
        .layui-btn{
            margin-left: -50px;
            border-radius: 5px;
            width: 350px;
            height: 40px;
            font-size: 15px;
        }
        .verity{
            width: 120px;
        }
        .font-set{
            font-size: 13px;
            text-decoration: none;
            margin-left: 120px;
        }
        a:hover{
            text-decoration: underline;
        }
        #canvas{
            float: right;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
            height: 38px;
        }
        .xtname{
            margin-left: 50px;
            padding-top: 20px;
            color: white;
            width:340px;
            font-size: 24px;
        }
        .loading{
            text-align: center;
            width: 200px;
            height: 85px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            padding-top: 10px;
            z-index: 999;
            display: none;
        }
    </style>
</head>
<body>
<img src="img/image3.jpg" id="background">
<div class="loading">
    <img src="image/login.gif" width="50px" height="50px">
</div>
<p class="xtname">面向计算机的在线教育平台系统</p>
<div class="layui-form">
    <div class="container">
        <div class="layui-form-mid layui-word-aux">
            <p id="logoid">用&nbsp;&nbsp;户&nbsp;&nbsp;登&nbsp;&nbsp;录</p>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账 &nbsp;&nbsp;号</label>
            <div class="layui-input-block">
                <input type="text" name="username" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input" autofocus>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密 &nbsp;&nbsp;码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline" style="width: 240px">
                <input id="code" type="text" name="title" required  lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input verity" style="display: inline">
                <canvas id="canvas" width="100" height="43"></canvas>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
                <button id="zhuce" class="layui-btn" style="background-color: orangered; margin-top: 10px;margin-left: -50px;" >没有账号，去注册！</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script>
    $("#zhuce").click(function(){
        location.href="register.html"
    })
    function randomColor() {//得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
        var show_num = [];
        draw(show_num);

        $("#canvas").on('click',function(){
            draw(show_num);
        })
        //监听提交
        form.on('submit(formDemo)', function(data){
            var geturl=url+user.login;
            var parm=data.field;
            var val = $("#code").val().toLowerCase();
            var num = show_num.join("");
            if(val == num){
                $.ajax({
                    type:"POST",
                    url:geturl,
                    // url:"http://localhost:8089/test/auth/login",
                    contentType: 'application/json',
                    data: JSON.stringify(parm),
                    success:function (res) {
                        console.log(res, 1);
                        if(res.data.state==="200"){
                            location.href="index.html"
                            var storage=window.localStorage;
                            //storage.setItem("Authorization",res.data.token);
                            storage.setItem("userid",res.data.user.id);
                            storage.setItem("userName",res.data.user.username);
                            storage.setItem("roleId",res.data.user.roles[0].roleid);
                            storage.setItem("roleName",res.data.user.roles[0].rolename);
                        }else if(res.data.state==="1"){
                            layer.msg("账号正在审核中！")
                        }else if(res.data.state==="2"){
                            layer.msg("账号审核未通过，请重新申请！")
                        }else if(res.data.state==="3"){
                            layer.msg("该账号所属角色已不存在！请联系管理员。")
                        }else if(res.data.state==="4"){
                            layer.msg("该账号已被管理员禁用，请联系管理员核实情况！")
                        }else {
                            layer.msg('账号或密码错误！');
                        }
                    },
                    beforeSend: function () {
                        $(".loading").css("display","block");
                    },
                    complete: function () {
                        $(".loading").css("display","none");
                    },
                })
            }else{
                layer.msg('验证码错误！请重新输入！');
                $("#code").val('');
                draw(show_num);
            }

        });
        //验证码
        function draw(show_num) {
            var canvas_width=$('#canvas').width();
            var canvas_height=$('#canvas').height();
            var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
            var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
            var aCode = sCode.split(",");
            var aLength = aCode.length;//获取到数组的长度

            for (var i = 0; i <= 3; i++) {
                var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                var txt = aCode[j];//得到随机的一个内容
                show_num[i] = txt.toLowerCase();
                var x = 10 + i * 20;//文字在canvas上的x坐标
                var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
                context.font = "bold 23px 微软雅黑";

                context.translate(x, y);
                context.rotate(deg);

                context.fillStyle = randomColor();
                context.fillText(txt, 0, 0);

                context.rotate(-deg);
                context.translate(-x, -y);
            }
            for (var i = 0; i <= 5; i++) { //验证码上显示线条
                context.strokeStyle = randomColor();
                context.beginPath();
                context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.stroke();
            }
            for (var i = 0; i <= 30; i++) { //验证码上显示小点
                context.strokeStyle = randomColor();
                context.beginPath();
                var x = Math.random() * canvas_width;
                var y = Math.random() * canvas_height;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.stroke();
            }
        }
    });
</script>
</body>
</html>
